<script lang="ts" setup>
import { reactive } from 'vue'
import { filterDate } from '@/utils/format'
import TimeLine from '@/components/timeLine/index.vue'

const props = defineProps({
  goodsFormDialog: Boolean,
  dialogData: Object,
  recordData: Object,
});
const emit = defineEmits(["closeDialog"]);
const closeDialog = () => {
  emit("closeDialog");
};
</script>

<template>
  <el-dialog :model-value="props.goodsFormDialog" title="申请详情" @close="closeDialog" v-if="props.dialogData" class="infoDialog-content">
    <el-row class="row-col-1 row-header">
      <el-col :span="24" class="font-weight">申请人信息</el-col>
    </el-row>
    <el-row class="row-col-3">
      <el-col :span="8">姓名：{{ props.dialogData.User.name }}</el-col>
      <el-col :span="8">性别：{{ props.dialogData.User.gender == 0 ? '男' : '女' }}</el-col>
      <el-col :span="8">手机号：{{ props.dialogData.User.phone }}</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">所在社团：{{ props.dialogData.User.Society.name }}</el-col>
      <el-col :span="12">职位：部长/会长</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">学号：{{ props.dialogData.User.stuCode }}</el-col>
      <el-col :span="12">学院：{{ props.dialogData.User.College.name }}</el-col>
    </el-row>
    <el-row class="row-col-2 row-footer mb-20">
      <el-col :span="12">专业：{{ props.dialogData.User.Major.name }}</el-col>
      <el-col :span="12">年级：{{ props.dialogData.User.Grade.name }}</el-col>
    </el-row>

    <el-row class="row-col-1 row-header ">
      <el-col :span="24" class="font-weight">申请内容</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12">申请类型：借用申请</el-col>
      <el-col :span="12">申请时间：{{ filterDate(props.dialogData.createdAt) }}</el-col>
    </el-row>
    <el-row class="row-col-3">
      <el-col :span="8">物资名称：{{ props.dialogData.Good.name }}</el-col>
      <el-col :span="8">物资单价(元)：{{ props.dialogData.Good.price }}</el-col>
      <el-col :span="8">入库单位：{{ props.dialogData.Good.unit }}</el-col>
    </el-row>
    <el-row class="row-col-1">
      <el-col :span="24">物资信息：{{ props.dialogData.Good.goodsInfo }}</el-col>
    </el-row>
    <el-row class="row-col-2">
      <el-col :span="12" class="theme-blue">申请数量：{{ props.dialogData.applyNumber }}</el-col>
      <el-col :span="12" class="theme-blue">库存数量：{{ props.dialogData.Good.stockNum }}</el-col>
    </el-row>
    <el-row class="row-col-1 row-footer mb-20">
      <el-col :span="24">申请原因：{{ props.dialogData.applyReason }}</el-col>
    </el-row>
    <div>
      <h3 class="mb-20">审批记录</h3>
      <TimeLine :recordData="recordData"/>
    </div>
  </el-dialog>
</template>


<style scoped lang="scss">

.demo-ruleForm {
  margin-top: 2rem;

  .el-form-item {
    margin-top: 2rem;
  }

  .form-radio {
    margin-right: 2rem;
  }
}


.infoDialog-content{
  max-height: 600px; 
  overflow: auto;
}
</style>
<style lang="scss" >
.form-footer-box {
  .el-form-item__content {
    display: flex;
    justify-content: end;
  }
}

</style>
